<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="childCenter" id="childCenter"></div>
    <div class="fatherOne">
      <div class="childOne" id="childOne"></div>
      <div class="childTwo" id="childTwo">
        <span>俱乐部成员人数:{{ this.clubMemberNumber }}人</span>
      </div>
      <div class="childThree" id="childThree"></div>
    </div>
    <div class="fatherTwo">
      <div class="childFour" id="childFour"></div>
      <div class="childFive" id="childFive">
        <span>俱乐部总收益:{{ this.totalIncome }}元</span>
      </div>
      <div class="childSix" id="childSix"></div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "dhKeShiHuaFenXi",
  data() {
    return {
      clubMemberNumber: '',
      totalIncome: '',
      childOneInnerData: [
        {value: '', name: '男性'},
        {value: '', name: '女性'}
      ],
      childOneOuterData: [],
      childThreeX: [],
      childThreeData: [],
      childFourX: [],
      childFourData: [],
      childSixData: [],
      fiveYears: [2019, 2020, 2021, 2022, 2023],
      childCenterData: []
    }
  },
  created() {
    this.getChildOneInnerData();
    this.getChildOneOuterData();
    this.getChildTwoData();
    this.getChildThreeData();
    this.getChildFourData();
    this.getChildFiveData();
    this.getChildSixData();
    this.getChildCenterData();
  },
  methods: {
    /**
     * 获取男性、女性用户人数
     */
    getChildOneInnerData() {
      this.$http.get('demo/dhuserinfo/getChildOneInnerData')
          .then(({data: res}) => {
            this.childOneInnerData[0].value = res.data[0];
            this.childOneInnerData[1].value = res.data[1];
          }).catch(_ => {
      })
    },
    /**
     * 获取不同年龄段用户人数
     */
    getChildOneOuterData() {
      this.$http.get('demo/dhuserinfo/getChildOneOuterData')
          .then(({data: res}) => {
            for (let i = 0; i < res.data.length; i++) {
              let item = {value: '', name: ''};
              item.value = res.data[i].num;
              item.name = res.data[i].ageRange;
              this.childOneOuterData.push(item);
            }
            this.echartsChildOne();
          }).catch(_ => {
      })
    },
    /**
     * 俱乐部男性、女性用户人数，用户年龄比例可视化图形初始化方法
     */
    echartsChildOne() {
      echarts.init(document.getElementById('childOne'), 'dark').setOption({
        title: {
          text: '俱乐部会员性别、年龄比例'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: [0, '20%'],
            data: this.childOneInnerData,
            label: {
              normal: {
                position: 'inner'
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            type: 'pie',
            radius: ['30%', '60%'],
            data: this.childOneOuterData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    /**
     * 获取俱乐部会员总数
     */
    getChildTwoData() {
      this.$http.get('demo/dhuserinfo/getChildTwoData')
          .then(({data: res}) => {
            this.clubMemberNumber = res.data;
          }).catch(_ => {
      })
    },
    /**
     * 获取近五年俱乐部收益数据
     */
    getChildCenterData() {
      for (let i = 0; i < this.fiveYears.length; i++) {
        this.$http.get('demo/dhclubearningsinfo/getChildCenterData', {
          params: {year: this.fiveYears.at(i)}
        }).then(({data: res}) => {
          this.childCenterData[i] = res.data;
          if (this.childCenterData.length === 5) {
            this.echartsChildCenter();
          }
        }).catch(() => {
        })
      }
    },
    /**
     * 近五年俱乐部收益数据可视化图形初始化方法
     */
    echartsChildCenter() {
      echarts.init(document.getElementById('childCenter'), 'dark').setOption({
        title: {
          text: '俱乐部年收益走势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.fiveYears
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.childCenterData,
            type: 'line',
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: 20
              }
            }
          }
        ]
      })
    },
    /**
     * 获取商品名称、库存数量
     */
    getChildThreeData() {
      this.$http.get('demo/dhgodsinfo/getChildThreeData')
          .then(({data: res}) => {
            for (let i = 0; i < res.data.length; i++) {
              this.childThreeX.push(res.data[i].godsName);
              this.childThreeData.push(res.data[i].amount);
            }
            this.echartsChildThree();
          }).catch(_ => {
      })
    },
    /**
     * 商品名称、库存数量可视化图形初始化方法
     */
    echartsChildThree() {
      echarts.init(document.getElementById('childThree'), 'dark').setOption({
        title: {
          text: '商品库存'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.childThreeX,
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          name: '库存数'
        },
        series: [{
          data: this.childThreeData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      })
    },
    /**
     * 获取俱乐部会员学历分布数据
     */
    getChildFourData() {
      this.$http.get('demo/dhuserinfo/getChildFourData')
          .then(({data: res}) => {
            for (let i = 0; i < res.data.length; i++) {
              this.childFourX.push(res.data[i].edu);
              this.childFourData.push(res.data[i].num);
            }
            this.echartsChildFour();
          }).catch(_ => {
      })
    },
    /**
     * 俱乐部会员学历分布可视化图形初始化方法
     */
    echartsChildFour() {
      echarts.init(document.getElementById('childFour'), 'dark').setOption({
        title: {
          text: '俱乐部会员学历分布'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.childFourX
        },
        yAxis: {
          type: 'value',
          name: '人数'
        },
        series: [{
          data: this.childFourData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      })
    },
    /**
     * 获取俱乐部总收益
     */
    getChildFiveData() {
      this.$http.get('demo/dhclubearningsinfo/getChildFiveData')
          .then(({data: res}) => {
            this.totalIncome = res.data;
          }).catch(_ => {
      })
    },
    /**
     * 获取不同活动报名人数
     */
    getChildSixData() {
      this.$http.get('demo/dhoutdorsportinfo/getChildSixData')
          .then(({data: res}) => {
            for (let i = 0; i < res.data.length; i++) {
              let item = {value: '', name: ''};
              item.value = res.data[i].num;
              item.name = res.data[i].sportName;
              this.childSixData.push(item);
            }
            this.echartsChildSix();
          }).catch(_ => {
      })
    },
    /**
     * 活动报名人数比例可视化图形初始化方法
     */
    echartsChildSix() {
      echarts.init(document.getElementById('childSix'), 'dark').setOption({
        title: {
          text: '俱乐部活动报名人数比例'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: this.childSixData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.fatherOne {
  width: 100%;
  height: 295px;
  display: flex;
  background-color: #100c2a;
}

.fatherTwo {
  width: 100%;
  height: 295px;
  display: flex;
  background-color: #100c2a;
}

.childOne {
  width: 30%;
  height: 294px;
  border-color: #4891fd;
  border-width: 2px;
  border-style: hidden dashed dashed hidden;
}

.childTwo {
  width: 40%;
  height: 100px;
  color: white;
  line-height: 100px;
  font-size: 30px;
  text-align: center;
}

.childThree {
  width: 30%;
  height: 294px;
  border-color: #4891fd;
  border-width: 2px;
  border-style: hidden hidden dashed dashed;
}

.childCenter {
  width: 37%;
  height: 390px;
  position: absolute;
  margin-left: 28.7%;
  margin-top: 100px;
  border-color: #4891fd;
  border-width: 2px;
  border-style: dashed hidden dashed hidden;
}

.childFour {
  width: 30%;
  height: 294px;
  border-color: #4891fd;
  border-width: 2px;
  border-right-style: dashed;
}

.childFive {
  width: 40%;
  height: 100px;
  margin-top: 195px;
  color: white;
  line-height: 100px;
  font-size: 30px;
  text-align: center;
}

.childSix {
  width: 30%;
  height: 294px;
  border-color: #4891fd;
  border-width: 2px;
  border-left-style: dashed;
}
</style>